<template>
    <div class="front">
        <el-container>
            <el-header>
                <div class="front-logo">
                    <a href="#">Hermit</a>
                </div>
                <el-menu
                        :default-active="activeIndex"
                        class="el-menu-demo"
                        mode="horizontal"
                        @select="handleSelect"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        router
                >
                    <el-menu-item index="home">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">网站首页</span>
                    </el-menu-item>
                    <el-menu-item index="articles">
                        <i class="el-icon-notebook-2"></i>
                        <span slot="title">学海无涯</span>
                    </el-menu-item>
                    <el-menu-item index="timecourse"><i class="el-icon-loading"></i>时间轴</el-menu-item>
                    <el-menu-item index="message"><i class="el-icon-s-comment"></i>留言交流</el-menu-item>
                    <el-menu-item index="5"><i class="el-icon-user-solid"></i>关于本站</el-menu-item>
                </el-menu>
            </el-header>
            <el-main class="mainBody">
                <router-view></router-view>
            </el-main>
        </el-container>



    </div>
</template>

<script>
    export default {
        name: "FrontHome",
        data() {
            return {
                activeIndex: ''
            }
        },
        methods:{
            handleSelect:function () {
                console.log("handleSelect");
            }
        },
        mounted(){
            this.activeIndex = window.location.pathname.substr(1);
            console.log(this.activeIndex);
        }

    }
</script>

<style scoped>

    .front-logo{
        display: inline-block;
        /*float: left;*/
        height: 60px;
        font-size: 35px;
        margin-left:120px;
    }
    .front-logo a{
        text-decoration: none;
        text-shadow: 0 0 2px black;
        color: white;
        font-style: italic;
        letter-spacing: 5px;
    }

    .el-menu-demo {
        padding-right: calc((100% - 625px)/2);
        float: right;
    }

    .mainBody{
        padding: 20px calc((100% - 1200px)/2) 20px calc((100% - 1200px)/2);
        text-align:left;
        height: calc(100vh - 60px);
    }
    .front-home{
        /*background-image: url("../../assets/bg.jpg");*/
    }
</style>